<template>
  <div>
    <el-row :gutter="24" class="statistics">
      <el-col :span="18" class="record">
        <div class="grid-content bg-purple recText">
          <el-col :span="14" class="order">
            <div class="order-header">
              <h3>
                工单统计
                <span>{{ start }}~{{ end }}</span>
              </h3>
              <div class="order-list">
                <div>
                  <h3>{{ total }}</h3>
                  <p>工单总数（个）</p>
                </div>
                <div>
                  <h3>{{ completedTotal }}</h3>
                  <p>完成工单（个）</p>
                </div>
                <div>
                  <h3>{{ progressTotal }}</h3>
                  <p>进行工单（个）</p>
                </div>
                <div>
                  <h3>{{ cancelTotal }}</h3>
                  <p>取消工单（个）</p>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12" class="sell">
            <div class="sell-header">
              <h3>
                销售统计
                <span>{{ start }}~{{ end }}</span>
              </h3>
              <div class="sell-list">
                <div>
                  <h3>{{ orderQuantity }}</h3>
                  <p>订单量（个）</p>
                </div>
                <div>
                  <h3>{{ salesVolume }}</h3>
                  <p>销售额（万元）</p>
                </div>
              </div>
            </div>
          </el-col>
        </div>
        <div class="recpic">
          <div class="header">
            <div class="title">
              <h3>
                销售数据
                <span>{{ start }}~{{ end }}</span>
              </h3>
            </div>
            <div class="btn" @click="activefn">
              <button class="button active" @click="regionCollectWeek">周</button>
              <button class="button" @click="regionCollectMoon">月</button>
              <button class="button" @click="regionCollectYear">年</button>
            </div>
          </div>
          <div class="chart">
            <el-col :span="12" class="chartLeft" />
            <el-col :span="12" class="chartRight" />
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="ranking">
        <div class="grid-content bg-purple list">
          <h3>
            商品热榜
            <span>{{ start }}~{{ end }}</span>
          </h3>
          <ul class="shoping">
            <li v-for="item,index in shoping" :key="index">
              <div class="rank" :class="[`rank${index+1}`]">{{ index+1 }}</div>
              <div class="title">{{ item.skuName }}</div>
              <div class="volume">{{ item.count }}单</div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="cooperate">
      <el-col :span="14" class="cooperateList">
        <div class="grid-content bg-purple label">
          <div class="headerTop">
            <h3>合作商点位Top5</h3>
            <span class="svg-container">
              <svg-icon icon-class="shenglue" />
            </span>
          </div>
          <el-row :gutter="24" class="cootable">
            <el-col :span="17" class="tablecood" />
            <el-col :span="7" class="tablelist">
              <div class="collect">
                <h3>{{ vmService }}</h3>
                <span>点位数</span>
                <h3>{{ userService }}</h3>
                <span>合作商数</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="10" class="unusual">
        <div class="grid-content bg-purple label">
          <div class="headerTop">
            <h3>异常设备监控</h3>
            <span class="svg-container">
              <svg-icon icon-class="shenglue" />
            </span>
          </div>
          <div class="empty">
            <img src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png">
            <div class="tips">暂无数据</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import {
  skuTop,
  taskReportInfo,
  orderAmount,
  orderReportInfo,
  regionCollect,
  amountCollect,
  nodeCollect,
  userService,
  vmService
} from '@/api/user'
export default {
  name: 'ElDkdPcIndex',

  data() {
    return {
      start: dayjs(dayjs()).startOf('month').format('YYYY-MM-DD'),
      starts: 0,
      end: dayjs().format('YYYY-MM-DD'),
      ends: 0,
      topValue: 10,
      shoping: [],
      cancelTotal: 0,
      completedTotal: 0,
      total: 0,
      progressTotal: 0,
      orderQuantity: 0,
      salesVolume: 0,
      // 本周第一天
      weekstart: dayjs().subtract(dayjs().day() ? dayjs().day() - 1 : 6, 'day').format('YYYY-MM-DD'),
      yearstart: dayjs().startOf('year').format('YYYY-MM-DD'),
      myChartRightList: {},
      myChartRightRight: {},
      myChartbutton: {},
      userService: 0,
      vmService: 0
    }
  },

  created() {
    this.getNowMonthfirst()
    this.skuTopApi()
    this.taskReportInfoAPI()
    this.orderAmountApi()
    this.orderReportInfoApi()
    this.regionCollectWeek()
    this.nodeCollectApi()
    this.userServiceApi()
    this.vmServiceApi()
  },
  methods: {
    getNowMonthfirst() {
      // 获取本月第一天时间 格式“yyyy-MM-dd HH:MM:SS”
      this.starts = this.start + ' 00:00:00'
      // 获取当前的日期时间 格式“yyyy-MM-dd HH:MM:SS”
      var currentdates = this.end + ' 23:59:59'
      this.ends = currentdates
    },
    async skuTopApi() {
      const res = await skuTop({
        topValue: this.topValue,
        start: this.start,
        end: this.end
      })
      this.shoping = res
    },
    async taskReportInfoAPI() {
      const res = await taskReportInfo({
        start: this.starts,
        end: this.ends
      })
      res.map((ele) => {
        this.total += ele.total
        this.completedTotal += ele.completedTotal
        this.cancelTotal += ele.cancelTotal
        this.progressTotal += ele.progressTotal
      })
    },
    async orderAmountApi() {
      const res = await orderAmount({
        start: this.starts,
        end: this.ends
      })
      this.salesVolume = (res / 1000000).toFixed(2)
    },
    async orderReportInfoApi() {
      const res = await orderReportInfo({
        start: this.starts,
        end: this.ends
      })
      this.orderQuantity = res
    },
    // 周
    async regionCollectWeek() {
      this.myChartRightList = await amountCollect({
        collectType: 1,
        start: this.weekstart,
        end: this.end
      })
      this.myChartRightList.xAxis.map((ele, index) => {
        this.myChartRightList.xAxis[index] =
          '星期' + '一二三四五六日 '.charAt(new Date(ele).getDay())
      })
      this.myChartLeft()
      this.myChartRightRight = await regionCollect({
        start: this.weekstart,
        end: this.end
      })
      this.myChartRight()
    },
    // 月
    async regionCollectMoon() {
      this.myChartRightRight = await regionCollect({
        start: this.start,
        end: this.end
      })
      this.myChartRight()

      this.myChartRightList = await amountCollect({
        collectType: 1,
        start: this.start,
        end: this.end
      })
      this.myChartLeft()
    },
    // 年
    async regionCollectYear() {
      this.myChartRightRight = await regionCollect({
        start: this.yearstart,
        end: this.end
      })
      this.myChartRight()

      this.myChartRightList = await amountCollect({
        collectType: 2,
        start: this.yearstart,
        end: this.end
      })
      this.myChartLeft()
    },
    async myChartLeft() {
      // console.log(this.myChartRightList)
      const myChartLeft = echarts.init(document.querySelector('.chartLeft'))
      const optionLeft = {
        xAxis: {
          type: 'category',
          data: this.myChartRightList.xAxis,
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          name: '单位：元',
          nameTextStyle: {
            color: '#ababab'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        title: {
          align: 'right',
          text: '销售额趋势图',
          right: 200
        },
        grid: {
          left: 100
        },
        series: [
          {
            data: this.myChartRightList.series,
            type: 'line',
            color: 'red',
            smooth: true,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#fff'
                  },
                  {
                    offset: 0.8,
                    color: '#ffe5e5'
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
      myChartLeft.setOption(optionLeft)
    },
    async myChartRight() {
      const myChartRight = echarts.init(document.querySelector('.chartRight'))
      const optionRight = {
        tooltip: {
          trigger: 'axis'
        },
        title: {
          text: '籍贯分布',
          right: 200,
          nameTextStyle: {
            color: '#ababab'
          }
        },
        grid: {
          left: 100
        },
        xAxis: {
          type: 'category',
          data: this.myChartRightRight.xAxis,
          nameTextStyle: {
            height: 200
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.myChartRightRight.series,
            color: '#9fc1ff',
            itemStyle: {
              borderRadius: 5
            },
            barWidth: 15,
            type: 'bar'
          }
        ]
      }
      myChartRight.setOption(optionRight)
    },
    activefn(e) {
      document.querySelector('.btn .active').classList.remove('active')
      e.target.classList.add('active')
    },
    async nodeCollectApi() {
      this.myChartbutton = await nodeCollect()

      this.myChartbuttonApi()
    },
    async myChartbuttonApi() {
      console.log(this.myChartbutton)
      const myChartButton = echarts.init(document.querySelector('.tablecood'))
      const optionbuttom = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: [50, 100],
            center: ['50%', '50%'],
            data: this.myChartbutton,
            roseType: 'radius',
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        color: ['#92b7ff', '#a8ffcf', '#ffc298', '#d9ffff', '#d1e0fd']
      }
      myChartButton.setOption(optionbuttom)
    },
    async userServiceApi() {
      this.userService = await userService()
    },
    async vmServiceApi() {
      this.vmService = await vmService()
    }
  }
}
</script>

<style lang="scss" scoped>
ul li {
  list-style: none;
}
.statistics {
  height: 540px;
  .record {
    height: 100%;
    padding: 0 10px;

    .recText {
      width: 100%;
      height: 166px;
      display: flex;
      .order {
        height: 100%;
        background-color: #fff;
        padding: 0 10px;
        border-radius: 20px;
        background: #e9f3ff;
        background-image: url(https://likede2-admin.itheima.net/img/task.66b715b7.png);
        background-repeat: no-repeat, no-repeat;
        background-position: 470px 50px, calc(100% - 12px) 100%;
        .order-header {
          font-weight: 400;
          font-size: 14px;
          padding: 20px;
          span {
            font-size: 12px;
            padding-left: 10px;
            color: #999;
          }
        }
        .order-list {
          height: 110px;
          display: flex;
          align-items: center;
          div {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            h3 {
              font-size: 36px;
              color: #072074;
            }
            P {
              color: #91a7dc;
            }
          }
        }
      }
      .sell {
        height: 100%;
        margin: 0 10px;
        border-radius: 20px;
        background: #fbefe8
          url(https://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat
          calc(100% - 12px) 100%;
        .sell-header {
          font-weight: 400;
          font-size: 14px;
          padding: 20px;
          span {
            font-size: 12px;
            padding-left: 10px;
            color: #999;
          }
        }
        .sell-list {
          height: 110px;
          display: flex;
          align-items: center;
          div {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            h3 {
              font-size: 36px;
              color: #ff5757;
            }
            P {
              color: #de9690;
            }
          }
        }
      }
    }
    .recpic {
      width: 100%;
      height: 352px;
      background-color: #fff;
      margin-top: 20px;
      padding: 20px;
      border-radius: 20px;
      .header {
        width: 100%;
        height: 35px;
        line-height: 35px;
        display: flex;
        justify-content: space-between;
        .title {
          h3 {
            font-size: 16px;
            span {
              font-weight: 400;
              font-size: 12px;
              color: #999;
            }
          }
        }
        .btn {
          background-color: #f4f4f5;
          width: 130px;
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
      }
      .chart {
        width: 100%;
        height: 100%;
        .chartLeft {
          height: 100%;
          padding-left: 500px;
        }
        .chartRight {
          height: 100%;
        }
      }
    }
  }
  .ranking {
    height: 100%;
    padding: 0 10px;
    .list {
      background-color: #fff;
      border-radius: 20px;
      height: 540px;
      padding: 20px;
      h3 {
        font-size: 16px;
        span {
          font-weight: 400;
          font-size: 12px;
          color: #999;
        }
      }
      .shoping {
        height: 100%;
        width: 100%;
        font-size: 14px;
        li {
          width: 100%;
          padding: 15px 0;
          display: flex;
          justify-content: space-between;
          .rank {
            width: 21px;
            padding-left: 6px;
            height: 20px;
            background: url();
            color: #8e5900;
          }
          .rank1 {
            background: url();
          }
          .rank2 {
            background: url();
          }
          .rank3 {
            background: url();
          }
        }
      }
    }
  }
}
.button {
  width: 33%;
  height: 30px;
  border: 0;
  border-radius: 5px;
  margin: 20px 5px;
}
.active {
  background-color: #fff;
  border: #fff;
  color: black;
  font-weight: 700;
}
.cooperate {
  height: 353px;
  // background-color: #fff;
  margin-top: 20px;
  // padding: 20px;
  .cooperateList {
    height: 100%;
    padding: 0 10px;
    .label {
      border-radius: 10px;
      height: 100%;
      padding: 20px;
      background-color: #fff;
      .headerTop {
        display: flex;
        font-size: 14px;
        justify-content: space-between;
        span {
          display: block;
          height: 20px;
          width: 20px;
          text-align: center;
          color: #5f84ff;
          border: 1px solid #5f84ff;
          border-radius: 50%;
          .shenglue {
            color: #5f84ff;
          }
        }
      }
      .cootable {
        height: 100%;
        .tablecood {
          height: 100%;
        }
        .tablelist {
          height: 100%;
          display: flex;
          align-items: center;
          .collect {
            padding-left: 40px;
            height: 230px;
            width: 155px;
            background-color: #999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
              linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
              linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
              linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
            background-size: 50% 50%;
            background-repeat: no-repeat;
            h3 {
              margin-top: 20px;
              margin-bottom: 5px;
              font-size: 24px;
              color: #072074;
            }
          }
        }
      }
    }
  }
  .unusual {
    height: 100%;
    padding: 0 10px;
    .label {
      height: 100%;
      border-radius: 10px;
      padding: 20px;
      background-color: #fff;
      .headerTop {
        display: flex;
        font-size: 14px;
        justify-content: space-between;
        span {
          display: block;
          height: 20px;
          width: 20px;
          text-align: center;
          color: #5f84ff;
          border: 1px solid #5f84ff;
          border-radius: 50%;
          .shenglue {
            color: #5f84ff;
          }
        }
      }
      .empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 20%;
      }
    }
  }
}
</style>
